.mutiple-img-uploader,
.single-img-uploader {
  position: relative;
  width: 178px;
  height: 178px;
  margin: 10px;
  transform: all 0.4s;
  display: inline-block;
  .img-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .el-upload__tip {
    width: 400px;
    line-height: 36px;
  }
  .el-upload:hover {
    border-color: #1890ff;
  }
  &:hover {
    .img-uploader__panel {
      visibility: initial;
    }
    .hover-action {
      opacity: 1;
    }
  }
  &__dialog {
    .el-dialog__body {
      display: flex;
      justify-content: center;
    }
  }
}
.upload-list,
.upload {
  .img-uploader__panel {
    position: absolute;
    z-index: 2;
    color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    visibility: hidden;
    text-align: center;
  }
  .name {
    line-height: 100%;
    margin-bottom: 20px;
  }
  .edit-btn {
    font-size: 20px;
    display: flex;
    justify-content: center;
    i {
      cursor: pointer;
      margin: 0 10px;
    }
  }
  .hover-action {
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    transition: opacity 0.3s;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.upload-list {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  &__item {
    margin-bottom: 14px;
  }
}
.mutiple-img-uploader .el-upload,
.single-img-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.big-file-upload-container {
  // text-align: center;
  width: 800px;

  .choosed-file-list {
    padding: 10px 20px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    .action {
      a {
        margin: 0 5px;
        color: #1890ff;
      }
    }
    table.imagetable {
      font-size: 11px;
      border-width: 1px;
      border-collapse: collapse;
      width: 100%;
      border: thin solid rgba(0, 0, 0, 0.12);
    }
    table.imagetable th {
      border-width: 1px;
      padding: 0 16px;
      color: rgba(0, 0, 0, 0.6);
      font-size: 14px;
      height: 30px;
      vertical-align: middle;
      border: thin solid rgba(0, 0, 0, 0.12);
    }
    table.imagetable td {
      border-width: 1px;
      padding: 0 16px;
      border-style: solid;
      border-color: #999999;
      border: thin solid rgba(0, 0, 0, 0.12);
      vertical-align: middle;
      text-align: center;
    }
    table.imagetable th {
      border: thin solid rgba(0, 0, 0, 0.12);
    }
    table.imagetable tr {
      th,
      td {
        word-break: break-all;
        &:first-child {
          width: 20%;
        }
        &:last-child {
          width: 20%;
        }
        &:nth-child(2) {
          width: 10%;
        }
        &:nth-child(3) {
          width: 14%;
        }
        &:nth-child(4) {
          width: 36%;
        }
      }
    }
  }
  .choosed-file__item {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 10px;
  }
}
